<template>
  <div class="yxp-composition" style="min-height:600px;">
    <div class="yxp-composition-box">
      <img src="@/assets/word/back-icon.png" class="back-prev" id="yxp-index-btn" @click="handleBack"/>
      <img src="@/assets/composition/composition-title.png" class="title-img"/>
      <div class="yxp-composition-box-title" id="yxp-index-btn1" @click="handleChange">
        <template v-if="title === ''">请选择课程</template><template v-else>{{title}}</template><img src="@/assets/word/course-icon.png" class="arrow"/>
      </div>
      <div class="yxp-composition-box-content">
        <img src="@/assets/composition/index-bg.png" class="bg" />
        <div class="triangle">
          <img src="@/assets/composition/triangle-empty.png" class="triangle-img triangle-empty"/>
          <img src="@/assets/composition/triangle-solid.png" class="triangle-img triangle-solid"/>
        <!--  <div class="total-study first-study">
            <p class="total-study-num">
              <em>{{indexInfo.note_num}}</em>篇
            </p>
          </div>
          <p class="total-study-text">累计已学</p>
          <div class="total-study study-r">
            <p class="total-study-num">
              <em>{{indexInfo.time}}</em>h
            </p>
          </div>
          <p class="total-text">累计已学</p> -->
        </div>
        <div class="circle" id="yxp-index-btn2" @click="handleModel">
          <img src="@/assets/composition/circle-index.png" class="circle-index"/>
            <img src="@/assets/composition/circle-text.png" class="circle-text"/>
            <p class="circle-model">写作模型</p>
          </div>
      </div>
      <div v-if="last_unit">
        <p class="last-study">上次学习：{{last_unit}}</p>
      </div>
      <div v-else>
        <p class="last-study" v-if="id > 0">上次学习：{{indexInfo.last.unit}}{{indexInfo.last.model}}</p>
      </div>
    </div>
    <div class="mark" v-if="isShow"></div>
    <div class="yxp-compsition-pop" v-if="isShow">
      <img src="@/assets/word/close-icon.png" class="close" @click="isShow = false"/>
      <div class="yxp-compsition-main">
        <div class="select-course" v-if="course.length > 0">
          <p class="select-course-item" v-for="(item,i) in course" :Key="item.id" :class="{active: curIndex === i}">
			<label v-if="item.is_expire" class="expire_course" @click="expiretip(item.expire_time,1)">{{item.level_title}}</label>
			<label v-else-if="item.can_study" @click="handleCourse(item,i)">{{item.level_title}}</label>
			<label v-else class="expire_course" @click="expiretip(item.expire_time,2)">{{item.level_title}}</label>
		</p>
        </div>
      </div>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import { lastCourse, courseList, indexInfo } from '@/services/composition.js'
import { startTime, stopTime } from '@/services/home.js'
import Timetips from '@/components/Timetips.vue'
export default {
  name: 'composition',
  components: {
    Timetips
  },
  data () {
    return {
      curIndex: -1, //课程默认显示
      title: sessionStorage.getItem('essay_course_title'),
      id: -1, // 课程id
      isShow: false,
      course_type: sessionStorage.getItem('essay_course_course_type'),
      course: [], // 课程列表
      last_unit:'',
      lastInfo: {}, // 上次课程信息
      indexInfo: {},
		package_id:0,
      last_package_id:sessionStorage.getItem('last_package_id')
    }
  },
  created () {
	let curr_id = sessionStorage.getItem('essay_course_id');
	if (curr_id) {
      this.curIndex = 1
      this.id = curr_id
      // this.last_unit = last_unit
      this.isShow = false
		if(this.last_package_id != undefined && this.last_package_id > 0 && this.last_package_id != null){
			if(this.id != this.last_package_id){
				// this.stoptime();
				sessionStorage.setItem('last_package_id',this.id)
				sessionStorage.setItem('essay_course_id',this.id)
				this.last_package_id = this.id
				// this.starttime();
			}
		}else{
			sessionStorage.setItem('last_package_id',this.id)
			this.last_package_id = this.id
			// this.starttime();
		}
      this.getIndexInfo(curr_id)
    } else {
      this.getLastCourse()
    }
  },
  methods: {
    // 选择课程
    handleCourse (item,i) {
      this.curIndex = i
      this.title = item.title
      this.id = item.id
      this.course_type = item.course_type
      console.log(this.id)
      this.isShow = false
      this.getIndexInfo(item.id)
    },
	expiretip (time,_tip) {
		if(_tip == 1){
			this.$toast('该课程已过期，请联系老师续费');
		}else{
			this.$toast('该课程暂不可用，请联系老师放开限制');
		}
		return false;
	},
    handleChange () {
      this.getCourseList()
    },
    handleModel () {
      console.log(this.course_type)
      if (this.title === '') {
        this.$toast('请选择课程')
        return
      }
      this.$router.push({
        path: "/composition/courseList",
        query: {
          id: this.id
        }
      })
    },
    async getLastCourse () {
      this.$loading.show()
      let data = await lastCourse()
      if (data.code === 1) {
        let result = data.data
        if (result.id === 0 || result.id === '') {
          this.getCourseList()
        } else {
          this.id = result.id
          this.title = result.title
          this.indexInfo = data.data
          this.course_type = data.data.type
          this.getIndexInfo(result.id)
        }
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    async getCourseList () {
      let params = {
        question_type: 4
      }
      let data =  await courseList(params)
      if (data.code === 1) {
        this.$loading.hide()
        this.course = data.data
        if (this.course.length === 0) {
          this.$toast('请购买课程')
          return
        } else {
          this.isShow = true
        }
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    async getIndexInfo (id) {
      let params = {
        id: id
      }
      let data = await indexInfo(params)
      if (data.code === 1) {
        this.id = data.data.id
        this.title = data.data.title
        this.$loading.hide()
		if(data.data.last.unit.length == 0){
			this.last_unit = 0;
		}
        this.indexInfo = data.data
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
async starttime () {
  let params = {
	package_id: this.id
  }
  let data = await startTime(params)
  if (data.code === 1) {
	console.log('start time success');
  } else {	
	this.$toast(data.info);
	console.log('start time fail');
	sessionStorage.setItem('last_package_id',0)
	this.last_package_id = 0;
	this.$router.replace({
		path: '/'
	})
	return false;
  }
},
	async stoptime () {
		// let params = {
		// 	package_id: this.last_package_id
		// }
		// let data = await stopTime(params)
		// if (data.code === 1) {
		// 	console.log('stop time success');
		// } else {
		// 	console.log('stop time fail');
		// }
	},
    handleBack () {
		// this.stoptime();
		sessionStorage.setItem('last_package_id',0)
		this.last_package_id = 0;
      this.$router.replace({
        path: '/'
      })
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang='less' scope>
.yxp-composition {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../../../assets/composition/composition-bg.png) center/100% 100% no-repeat;
  box-sizing: border-box;
  background-size: cover;
  &-box {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    background: rgba(255,255,255,1);
    box-shadow: 0px 3px 30px rgba(22,131,18,0.16);
    opacity: 0.9;
    border-radius: 20px;
    .back-prev {
      position: absolute;
      left: 30px;
      top: 30px;
      width: 30px;
      height: 27px;
      cursor: pointer;
    }
    &-title {
      display: flex;
      justify-content: center;
      align-items: center;;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 26px;
      color: #454545;
      cursor: pointer;
      img {
        display: inline-block;
        width: 15px;
        height: 15px;
      }
    }
    &-content {
      position: relative;
      width: 1030px;
      margin: 45px auto 0;
      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 320px;
      }
      // .triangle {
      //   position: relative;
      //   width: 400px;
      //   height: 400px;
      //   margin: 0 auto;
      //   .total-text {
      //     position: absolute;
      //     right: 48px;
      //     top: 130px;
      //     color: #fff;
      //     font-size: 12px;
      //     font-family: Microsoft YaHei;
      //     font-weight: bold;
      //     line-height: 16px;
      //     z-index: 10;
      //   }
      //   .total-study-text {
      //     position: absolute;
      //     left: 50px;
      //     top: 130px;
      //     color: #fff;
      //     font-size:12px;
      //     font-family:Microsoft YaHei;
      //     font-weight:bold;
      //     line-height: 16px;
      //     z-index: 10;
      //   }
      //   &-img {
      //     position: absolute;
      //     left: 0;
      //     top: -7px;
      //     width: 400px;
      //     height: 400px;
      //   }
      //   &-empty {
      //     z-index: 1;
      //   }
      //   &-solid {
      //     z-index: 3;
      //   }
      //   .first-study {
      //     left: 51px;
      //     text-align: left;
      //   }
      //   .study-r {
      //     right: 46px;
      //     text-align: center;
      //   }
      //   .total-study {
      //     position: absolute;
      //     top: 110px;
      //     z-index: 10;
      //     p {
      //       line-height: 16px;
      //     }
      //     &-num {
      //       color: #fff;
      //       font-size:12px;
      //       font-family:Microsoft YaHei;
      //       font-weight:400;
      //       em {
      //         font-size: 28px;
      //         font-family: Klavika;
      //         font-weight: 500;
      //       }
      //     }
      //   }
      // }
      // .circle {
      //   position: absolute;
      //   left: 50%;
      //   top: 83px;
      //   transform: translateX(-50%);
      //   width: 230px;
      //   height: 230px;
      //   z-index: 10;
      //   color: #000;
      //   cursor: pointer;
      //   &-index {
      //     width: 100%;
      //     height: 100%;
      //   }
      //   &-text {
      //     position: absolute;
      //     left: 91px;
      //     top: 67px;
      //     width: 48px;
      //     height: 53px;
      //   }
      //   &-model {
      //     position: absolute;
      //     left: 50%;
      //     bottom: 73px;
      //     transform: translateX(-50%);
      //     font-size:20px;
      //     font-family:Microsoft YaHei;
      //     font-weight:bold;
      //     color: #fff;
      //     line-height: 26px;
      //   }
      // }
    }
  }
  .last-study {
    position: absolute;
    left: 50%;
    // bottom: 95px;
    transform: translate(-50%,-50%);
    // font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #0FC1A1;
  }
  .yxp-compsition-main {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    margin: 40px;
  }
  .yxp-compsition-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 480px;
    background: #fff;
    border-radius: 10px;
    z-index: 1000;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .select-course {
      text-align: center;
      margin-bottom: 30px;
      &::-webkit-scrollbar { width: 0 !important }
      .active {
        color: #27BFA3;
      }
      &-item {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin: 40px 0 20px;
        cursor: pointer;
      }
    }
  }
  .expire_course{
	color: #CCCCCC;
  }
}
</style>
